<template>
	<view class="content">
		<view class="head">
		</view>
		<view class="main">
			<view class="recommend">
				<image id="recommend" src="http://minipos.posyun3721.com/image/marketing/recommend.png"></image>
				<view v-if="hotList==''" style="text-align: center">商家暂未发布活动</view>
				<view v-else>
					<block v-for="(item, index) in hotList" :key="index" v-if="index<6">
						<view class="rec-box" @click="onHot" :data-type="item.AcType" :data-goodID="item.AcId"
							:data-goodsId="item.GoodsId">
							<view class="rec-img">
								<image class="rec-image" mode="aspectFit" :src="item.Img"></image>
								<view class="image-content">
									<text class="image-con-left" v-if="item.AcType==1">{{item.GroupQty}}人拼团</text>
									<text class="image-con-left" v-else-if="item.AcType==2"></text>
									<text class="image-con-left" v-else>砍到底！{{item.Price}}元带回家！</text>
									<view class="image-con-right">
										<view class="image-view">
											<image class="image-img"
												src="http://minipos.posyun3721.com/image/marketing/people-img2.png">
											</image>
											<text>{{item.ReadCount}}</text>
										</view>
										<view class="image-view">
											<image class="image-img"
												src="http://minipos.posyun3721.com/image/marketing/user.png"></image>
											<text>{{item.UsedQty}}</text>
										</view>
									</view>
								</view>
							</view>
							<view class="rec-content">
								<view class="rec-title">
									<text
										:class="[item.AcType==1?'type1':(item.AcType==2?'type2':'type3')]">{{item.AcType==1?'拼团':(item.AcType==2?'秒杀':'砍价')}}</text>
									<text class="title">{{item.Title}}</text>
								</view>
								<view class="rec-originator">
									<view class="originator">
										<text class="orig-name">{{name}}</text>
									</view>
									<view class="money">
										<text>¥{{item.Price}}</text>
									</view>
								</view>
							</view>
							<view class="activity">
								<text>剩余：{{item.IvQty}}份</text>
							</view>
						</view>
					</block>
				</view>
			</view>
			<view class="recom select" v-if="merchant.length!=0">
				<view class="recom-head">
					<text class="recom-title">推荐商家</text>
				</view>
				<view class="recom-box" v-for="(item,index) in merchant" :key="index" :data-id="index"
					:data-title="item.FMiniProgramName" :data-Stockid="item.Stockid" bindtap="onRecom">
					<view class="recom-img">
						<image mode="aspectFit" :src="item.Img"></image>
						<view class="recom-content"></view>
						<view class="recom-content2">
							<image class="recom-cont"
								:src="[item.FHeadUrl!=''?item.FHeadUrl:'http://minipos.posyun3721.com/image/marketing/logo.jpg']">
							</image>
							<view class="recom-con">
								<text class="r-text recom-text">{{item.FName}}</text>
								<view class="r-con">
									<image src="/image/location.png"></image>
									<text class="recom-text">广东省广州市番禺区石楼镇莲港大道67号401房</text>
								</view>
							</view>
						</view>
					</view>
					<view class="rec-title recom-T">
						<text
							:class="[item.AcType==1?'type1':(item.AcType==2?'type2':'type3')]">{{item.AcType==1?'拼团':(item.AcType==2?'秒杀':'砍价')}}</text>
						<text class="title recom-text" style="width:560rpx;">{{item.Title}}</text>
					</view>
				</view>
			</view>
		</view>

		<dialog :class=" [FPhone==0?'':'none']" id='dialog' bind:confirmEvent='confirmEvent'
			bind:bindgetphonenumber='bindgetphonenumber'>
		</dialog>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				days: 0,
				hours: 0,
				minutes: 0,
				seconds: 0,
				hotListType: '',
				hotList: [{
					AcType: 1, //类型
					Title: '限定【奶茶猫】特制芝士奶盖草莓果茶', //标题
					Img: 'http://minipos.posyun3721.com/image/Marketing/rec1.png', //商品图片
					userImg: '/image/Marketing/login.png', //活动发起人头像
					userName: '嘿嘿嘿', //活动发起人名称
					ReadCount: 7553, //浏览人数
					UsedQty: 5891, //参与人数   
					price: 258, //价格
					IvQty: 352, //剩余商品数量
					GroupQty: 3,
					Price: 1,
					Price: 0.01
				}, {
					AcType: 2, //类型
					Title: '爱you创意千层甜品8寸千层提拉米苏！', //标题
					Img: 'http://minipos.posyun3721.com/image/Marketing/rec1.png', //商品图片
					userImg: '', //活动发起人头像
					userName: '哈哈哈', //活动发起人名称
					ReadCount: 651, //浏览人数
					UsedQty: 622, //参与人数   
					price: 45, //价格
					IvQty: 52, //剩余商品数量
					GroupQty: 3,
					Price: 1,
					Price: 0.01
				}, {
					AcType: 3, //类型
					Title: '爱you创意千层甜品8寸千层提拉米苏！', //标题
					Img: 'http://minipos.posyun3721.com/image/Marketing/rec1.png', //商品图片
					userImg: '', //活动发起人头像
					userName: '嗯嗯额', //活动发起人名称
					ReadCount: 1548, //浏览人数
					UsedQty: 1203, //参与人数   
					price: 530, //价格
					IvQty: 32, //剩余商品数量
					GroupQty: 3,
					Price: 1,
					Price: 0.01
				}, ], //热门推荐列表
				navID: 0, //导航id

				FPhone: 1, //
				// isBeGranted: 1,
				FItemID: '', //当前店铺的FItemID
				parentID: '', //推荐人id

				bargainList: '', //砍价列表

				hotList1: '',
				hotList2: '',
				hotList3: '',
				acid: '',
				name: '',
				merchant: [], //推荐商家
				loginID:''
			}
		},
		props: {
			//列表
			hotList: {
				type: Array,
				default: () => []
			},
			//标题
			title: {
				type: String,
				default: '猜你喜欢'
			},
			loginID: {
				type: String,
				default: () => ''
			},
		},
		methods: {
			//热门推荐跳转
			onHot: function(e) {
				var type = e.currentTarget.dataset.type;
				var selectid = e.currentTarget.dataset.type;
				var googId = e.currentTarget.dataset.goodid;
				var GoodsId = e.currentTarget.dataset.goodsid;
				type = type == 1 ? '0' : (type == 2 ? '1' : '2')
				debugger
				uni.setStorageSync('GoodsId', GoodsId);
				//console.log(type, googId);
				if (this.loginID == 1) {
					uni.navigateTo({
						url: '/pages/Marketing/index/select/select' + selectid + '/select' + selectid +
							'?id=' + type + '&groupId=' +
							googId,
						fail: err => {
							//console.log(err);
						}
					})
				} else {
					uni.showModal({
						title: '提示',
						content: '您还未登录，请先去我的界面登录!!',
						success: res => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/Member/login/login',
								})
							}
						}
					})
				}

			},
		}
	}
</script>

<style>
	.content {
		width: 100%;
		height: auto;
	}

	.head {
		width: 100%;
		height: 150rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-around;
	}

	.head-box>image {
		width: 60rpx;
		height: 60rpx;
		margin: 16rpx auto 22rpx auto;
		border-radius: 50%;
		display: block;
	}

	.head-box>text {
		font-size: 28rpx;
		color: #969696;
		text-align: center;
		display: block;
	}

	.region {
		width: 100%;
		height: auto;
		margin-bottom: 42rpx;
	}

	#location {
		width: 32rpx;
		height: 40rpx;
		margin: 5rpx 20rpx 0 48rpx;
		display: block;
		float: left;
	}

	.region-name {
		color: #FF892E;
		font-size: 32rpx;
		line-height: 42rpx;
	}

	.search {
		width: 100%;
		height: auto;
		position: relative;
	}

	.search-img {
		width: 40rpx;
		height: 40rpx;
		padding: 12rpx 14rpx 8rpx 14rpx;
		display: block;
		position: absolute;
		top: 0;
		left: 88rpx;
	}

	#search {
		/* width: 530rpx; */
		width: 462rpx;
		height: 60rpx;
		margin-left: 88rpx;
		border: 2rpx solid #FF892E;
		border-radius: 8rpx;
		float: left;
		padding-left: 68rpx;
	}

	.search>text {
		float: left;
		color: #FF892E;
		font-size: 32rpx;
		line-height: 60rpx;
		margin-left: 20rpx;
	}

	.main {
		width: 100%;
		height: auto;
		background-color: #F9F9F9;
	}

	.recommend,
	.select {
		width: 100%;
		height: auto;
		padding-top: 10rpx;
	}

	#recommend,
	#select {
		width: 224rpx;
		height: 42rpx;
		margin: 0 auto;
		display: block;
		margin-bottom: 40rpx;
	}

	.rec-box {
		width: 702rpx;
		height: 515rpx;
		box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.05);
		border-radius: 16rpx;
		background: #fff;
		margin: 0 auto;
		margin-bottom: 30rpx;
		position: relative;
	}

	.rec-box:last-child {
		margin-bottom: 130rpx;
	}

	.activity {
		width: 160rpx;
		height: 50rpx;
		/* background:linear-gradient(183deg,rgba(255,151,47,1) 0%,rgba(255,46,46,1) 100%); */
		background-color: #249ef3;
		border-radius: 8rpx;
		position: absolute;
		top: 20rpx;
		right: -14rpx;
	}

	.activity>text {
		color: #fff;
		font-size: 24rpx;
		line-height: 50rpx;
		display: block;
		text-align: center;
	}

	.rec-img {
		width: 100%;
		height: 356rpx;
		position: relative;
		margin-bottom: 20rpx;
	}

	.rec-image {
		width: 100%;
		height: 100%;
	}

	.image-content {
		width: 100%;
		height: 58rpx;
		background: #000;
		opacity: 0.5;
		position: absolute;
		bottom: 0rpx;
		color: #fff;
	}

	.image-con-left {
		margin-left: 30rpx;
		font-size: 32rpx;
		line-height: 58rpx;
	}

	.image-con-right {
		float: right;
		margin-right: 10rpx;
		font-size: 24rpx;
	}

	.image-view {
		float: left;
		line-height: 58rpx;
		margin-right: 16rpx;
	}

	.image-view>.image-img {
		width: 32rpx;
		height: 32rpx;
		margin: 13rpx 0;
		float: left;
		margin-right: 10rpx;
	}

	.rec-content {
		width: 100%;
		height: 160rpx;
		position: relative;
	}

	.rec-title {
		margin-left: 30rpx;
	}

	.rec-title>text:first-child {
		width: 72rpx;
		height: 42rpx;
		color: #fff;
		font-size: 24rpx;
		line-height: 42rpx;
		text-align: center;
		margin-right: 20rpx;
		float: left;
		border-radius: 4rpx;
	}

	.type1 {
		background: linear-gradient(180deg, rgba(255, 191, 0, 1) 0%, rgba(255, 122, 39, 1) 100%);
	}

	.type2 {
		background: linear-gradient(180deg, rgba(71, 163, 255, 1) 0%, rgba(99, 63, 199, 1) 100%);
	}

	.type3 {
		background: linear-gradient(180deg, rgba(243, 77, 237, 1) 0%, rgba(135, 26, 230, 1) 100%);
	}

	.title {
		color: #333;
		font-size: 32rpx;
		line-height: 42rpx;
		display: block;
		width: 640rpx;
	}

	.rec-originator {
		position: absolute;
		bottom: 28rpx;
		width: 642rpx;
		margin: 0 30rpx;
	}

	.originator {
		width: auto;
		height: 60rpx;
		float: left;
		line-height: 72rpx;
	}

	.orig-image {
		width: 72rpx;
		height: 72rpx;
		margin-right: 22rpx;
		background-color: #EBEBEB;
		border-radius: 50%;
		float: left;
	}

	.orig-name {
		color: #999999;
		font-size: 24rpx;
		text-align: center;
		display: block;
		float: left;
	}

	.money {
		float: right;
	}

	.money>text:first-child {
		color: #FF2741;
		font-size: 36rpx;
		font-weight: bold;
		line-height: 60rpx;
		float: left;
	}

	.money>.but {
		width: 170rpx;
		height: 60rpx;
		padding: 0;
		line-height: 60rpx;
		background: linear-gradient(180deg, rgba(238, 82, 73, 1) 0%, rgba(188, 11, 0, 1) 100%);
		border-radius: 8rpx;
		float: left;
		margin-left: 20rpx;
		color: #fff;
		font-size: 28rpx;
	}

	.select {
		padding-bottom: 60rpx;
	}

	.select-box {
		width: 682rpx;
		height: 240rpx;
		padding: 24rpx 0 24rpx 20rpx;
		margin: 0 auto;
		box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.05);
		border-radius: 16rpx;
		background-color: #fff;
		margin-bottom: 40rpx;
	}

	.select-image {
		width: 232rpx;
		height: 240rpx;
	}

	.select-content {
		width: 426rpx;
		height: 240rpx;
		margin-left: 24rpx;
		position: relative;
		float: right;
	}

	.select-con-title {
		color: #333;
		font-size: 24rpx;
		line-height: 32rpx;
		display: inline-block;
	}

	.progress {
		width: 100%;
		height: 28rpx;
		margin-top: 34rpx;
	}

	.progress>text {
		float: right;
		margin-right: 18rpx;
		color: #B8B8B8;
		font-size: 20rpx;
		line-height: 28rpx;
	}

	.evolve {
		float: left;
		width: 278rpx;
		height: 20rpx;
		border: 2rpx solid #FF2741;
		background-color: #FFD3D9;
		border-radius: 10rpx;
		position: relative;
	}

	.bar {
		width: 68%;
		height: 20rpx;
		background-color: #FF2741;
		border-radius: 10rpx;
	}

	.bar-number {
		color: #fff;
		font-size: 20rpx;
		line-height: 20rpx;
		width: 100%;
		display: inline-block;
		text-align: center;
		position: absolute;
		bottom: 0rpx;
		z-index: 100;
	}

	.select-con-but {
		width: 100%;
		height: 74rpx;
		position: absolute;
		bottom: 8rpx;
	}

	.con-but {
		width: 170rpx;
		height: 74rpx;
		border-radius: 8rpx;
		float: right;
		margin-right: 18rpx;
		color: #fff;
		font-size: 28rpx;
		padding: 0;
		line-height: 74rpx;
	}

	.discount {
		line-height: 48rpx;
		color: #FF2741;
		font-size: 36rpx;
		float: left;
	}

	.discount>text:first-child {
		font-size: 24rpx;
		font-weight: bold;
	}

	.discount>text:nth-child(2) {
		font-weight: bold;
	}

	.discount .original {
		color: #B8B8B8;
		font-size: 28rpx;
		margin-left: 10rpx;
		text-decoration: line-through;
	}

	.footer {
		width: 100%;
		height: 60rpx;
		display: flex;
		justify-content: center;
		background-color: #F9F9F9;
		margin-bottom: 120rpx
	}

	.comp #comp {
		width: 88rpx;
		height: 32rpx;
		float: left;
		margin: 14rpx 0;
	}

	.comp text {
		color: #BABABA;
		font-size: 24rpx;
		line-height: 60rpx;
		float: left;
		margin-left: 20rpx;
	}

	.make {
		position: fixed;
		bottom: 170rpx;
		/* background-color: #FF6A7C; */
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		z-index: 10000;
	}

	.make>text {
		width: 40rpx;
		height: 56rpx;
		color: #fff;
		font-size: 20rpx;
		margin: 22rpx 30rpx;
		display: block;
	}

	.make>image {
		width: 100rpx;
		height: 100rpx;
		color: #fff;
		font-size: 20rpx;
		display: block;
	}

	/* 导航 */
	.nav {
		width: 100%;
		height: 112rpx;
		border-top: 2rpx solid #D8D8D8;
		background: #fff;
		position: fixed;
		bottom: 0rpx;
		display: flex;
		justify-content: space-around;
		z-index: 100000;
	}

	.nav-box>image {
		width: 52rpx;
		height: 52rpx;
		margin-top: 18rpx;
		display: block;
	}

	.nav-box text {
		color: #818181;
		font-size: 24rpx;
		line-height: 32rpx;
		display: block;
	}

	.recom {
		margin-bottom: 50rpx;
	}

	.recom-head {
		text-align: center;
		height: 50rpx;
		margin-top: 10rpx;
	}

	/* 分隔线 */
	.recom-title {
		display: table;
		width: 500rpx;
		line-height: 50rpx;
		white-space: nowrap;
		border-spacing: 2rem 0;
		font-size: 30rpx;
		color: #767676;
		margin: auto;
	}

	.recom-title::before,
	.recom-title::after {
		display: table-cell;
		content: "";
		width: 50%;
		background: linear-gradient(#959595, #959595) repeat-x center;
		background-size: 0.1rem 0.1rem;
	}

	/* 分隔线 */

	.recom-box {
		width: 702rpx;
		height: 460rpx;
		box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.05);
		border-radius: 16rpx;
		background: #fff;
		margin: 30rpx auto;
		position: relative;
	}

	.recom-img {
		width: 100%;
		height: 356rpx;
		display: block;
		position: relative;
	}

	.recom-img>image {
		width: 100%;
		height: 100%;
		border-top-right-radius: 16rpx;
		border-top-left-radius: 16rpx;
	}

	.recom-T {
		margin-top: 40rpx;
	}

	.recom-text {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.recom-content {
		width: 100%;
		height: 100%;
		position: absolute;
		bottom: 0rpx;
		background: linear-gradient(#fff, #747d82, #000);
		opacity: 0.5;
		z-index: 100;
	}

	.recom-content2 {
		width: 100%;
		height: 135rpx;
		position: absolute;
		bottom: 10rpx;
		z-index: 1000;
	}

	.recom-cont {
		margin-left: 28rpx;
		width: 135rpx;
		height: 135rpx;
		display: block;
		float: left;
		border-radius: 50%;
	}

	.recom-con {
		float: left;
		height: 135rpx;
		width: 500rpx;
		display: block;
		margin-left: 30rpx;
	}

	.recom-con {
		/* color: #fff; */
		font-size: 24rpx;
		color: #fff;
	}

	.r-con>image {
		width: 45rpx;
		height: 45rpx;
		display: block;
		float: left;
		margin-right: 10rpx;
	}

	.r-con>text {
		width: 445rpx;
		display: block;
		float: left;
		line-height: 45rpx;
	}

	.r-text {
		line-height: 80rpx;
		font-size: 32rpx;
		width: 100%;
	}
</style>
